<template>
  <div class="new-type">
    <div v-if="type === 'createLibrary' || type === 'updateLibrary'">
      <build-library
        ref="library"
        :type="type"
        :options="options"
        class="page"
      />
    </div>

    <div v-if="type === 'createFunction' || type === 'updateFunction'">
      <build-function
        ref="functions"
        :type="type"
        :options="options"
        class="page"
      />
    </div>
  </div>
</template>

<script>
/**
 * path: '/functions-library/edit',
 * name: 'NewByType',
 * title: "根据Type新建函数库或函数"
 */
import BuildFunction from './plugins/BuildFunction.vue';
import BuildLibrary from './plugins/BuildLibrary.vue';
import { mapMutations } from 'vuex';
export default {
  name: 'NewLibrary',
  components: {
    BuildFunction,
    BuildLibrary
  },
  data() {
    return {
      type: '',
      options: {},
      title: {
        createFunction: '新建函数',
        updateFunction: '修改函数配置',
        createLibrary: '新建函数库',
        updateLibrary: '修改函数库配置'
      }
    };
  },
  created() {
    if (JSON.stringify(this.$route.params) === '{}') {
      this.$router.push({
        name: 'MyLibrary'
      });
      return;
    }
    this.type = this.$route.params.type;
    this.options = this.$route.params.options;
    this.setTitle(this.title[this.type]);
  },
  mounted() {
    this.setTitle(this.title[this.type]);
  },
  methods: {
    ...mapMutations('functions', ['setTitle'])
  }
};
</script>

<style lang="scss" scoped>
.page {
  margin: 100px 100px 0;

  img {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
  }

  span {
    margin-left: 20px;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
  }
}
</style>
